<template>
  <div class="boxgrade">
    <!-- 背景 -->
    <div class="bg">
      <!-- 头部 -->
      <div class="hearde">
        <span
          @click="$router.go(-1)"
          class="iconfont icon-arrowRight-copy-copy"
        ></span>
        <div>经验等级</div>
      </div>
      <!-- 经验条 -->
      <div class="gradelength">
        <div class="div">Lv{{ upperlevel }}</div>
        <div class="grale">
          <p>当前经验值</p>
          <h3>{{ empirical }}</h3>
          <div>下一级需要{{ need - empirical }}经验值</div>
        </div>
        <div class="div">Lo{{ lowerlevel }}</div>
        <div :style="{ transform: 'rotate(' + bar + 'deg)' }" class="progress">
          <div class="small"></div>
        </div>
      </div>
    </div>
    <!-- 当前会员特权 -->
    <div class="privilege">
      <div class="pri">当前会员特权</div>
      <span>· 每日赠送推荐票0张</span>
    </div>
    <!-- 经验等级 -->
    <div class="privilege">
      <div class="pri">经验等级特权</div>
      <span>
        <p>为了奖励起点读书的活跃用户特此推出经验值体系；</p>
        <p>
          活跃用户可获得更高的经验值，经验值等级越高每天获赠的推荐票也越多。
        </p>
      </span>
    </div>
    <div class="box"></div>
    <footers></footers>
  </div>
</template>

<script>
import footers from "../components/base/footers.vue";
export default {
  components: { footers },
  data() {
    return {
      empirical: null, //经验值
      // top: null, //停止定时器
      upperlevel: 0, //上一级
      lowerlevel: 1, //下一级
      need: 100, //需要的经验
      bar: 0, //度数
      a:[    
      ]
    };
  },
  methods: {
    //启动定时器
    // plase() {
    //   this.top = setInterval(() => {
    //     this.empirical += 1;
    //   }, 1000);
    // },
  },
  created() {
    this.empirical = window.localStorage.getItem("empiricalvalue");//获取看书经验值
    this.need = parseInt(window.localStorage.getItem("need"));//获取所需要的经验值
    this.upperlevel = parseInt(window.localStorage.getItem("upperlevel"));//获取当前等级
    this.lowerlevel = this.upperlevel+1;
    this.bar = (180 / this.need) * this.empirical + 180;
    if (this.empirical >= this.need) {
      this.upperlevel += 1;   
      this.need = parseInt(this.empirical) + 100;
    }
  },
  updated() {},
  watch: {
    //升级的时候的时候改变
    upperlevel() {
      window.localStorage.setItem("need", this.need);
      window.localStorage.setItem("upperlevel", this.upperlevel);
    },
    empirical(){
      if(this.empirical == this.need){
        this.bar=0
      }
    }
  },
};
</script>

<style lang="less">
.boxgrade {
  .bg {
    font-size: 14px;
    overflow: hidden;
    height: 183px;
    text-align: center;
    color: #fff;
    background: #ed424b url(/qdm/img/center-header-bg.c36bb.jpg) no-repeat
      center;
    background-size: cover;
  }
  .hearde {
    display: flex;
    align-items: center;
    padding: 12px 0px;
    width: calc(100% - 16px);
    padding-left: 16px;
    color: white;
    font-size: 14px;
    margin-bottom: 12px;
    span {
      margin-right: 10px;
    }
    div {
      font-size: 14px;
    }
  }
  .privilege {
    width: calc(100% - 16px);
    padding-left: 16px;
    background-color: white;
    margin-bottom: 12px;
    .pri {
      font-size: 14px;
      color: #33373d;
      font-weight: 600;
      padding: 12px 0px;
      border-bottom: 1px solid whitesmoke;
    }
    span {
      display: inline-block;
      font-size: 14px;
      color: #33373d;
      padding: 12px 0;
    }
  }
  .box {
    width: 100%;
    background-color: white;
    height: 170px;
  }
  .gradelength {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
    padding-top: 5px;
    .div {
      line-height: 190px;
      font-size: 16px;
      margin: 0px 10px;
    }
    .grale {
      width: 222px;
      height: 222px;
      border: 12px solid #0000003d;
      border-radius: 50%;
      p {
        margin-top: 25px;
        font-size: 12px;
      }
      h3 {
        color: #ffe9a3;
        font-size: 24px;
        font-weight: 600;
        padding: 3px 0px;
      }
      div {
        font-size: 12px;
      }
    }
    .progress {
      position: absolute;
      width: 222px;
      height: calc(222px / 2);
      border-radius: 222px 222px 0 0;
      transform: rotate(180deg);
      transform-origin: 122px 123px;
      border: 12px solid #ffe9a3;
      border-bottom: 0px;
      .small {
        width: 12px;
        height: 12px;
        background-color: #ffe9a3;
        border-radius: 50%;
        position: absolute;
        right: -12px;
        bottom: -6px;
      }
    }
  }
}
</style>